<template>
  <el-dialog class="zw-importer" :model-value="visible" title="数据导入工具" width="600" :show-close="false"
    :close-on-click-modal="false">
    <div class="uploader">
      <el-upload v-model:file-list="fileList" name="files" class="upload" drag :action="`${action}`"
        :on-success="onUploadSuccess" :before-upload="beforeUpload">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽文件到此处或点击上传
        </div>
      </el-upload>
    </div>
    <div class="import-progress">
      <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </div>
    <div class="tip">
      <pre>注: 先上传要导入的文件，上传成功后,再点击导入按钮</pre>
    </div>
    <template #footer>
      <div class="buttons">
        <el-button @click="emits('close')">关闭</el-button>
        <el-button :disabled="disabled" @click="onImport" :loading="loading" type="primary">
          导入
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import ApiTree from '@/server/api-tree';
import type { RestResult } from '@/server/server-response';
import { ElMessage, type UploadRawFile, type UploadUserFile } from 'element-plus';
import { ref, watch } from 'vue';
const emits = defineEmits<{
  (e: "close"): void,
  (e: "import", fileId: string[], callback: () => void): void
}>();
const props = withDefaults(defineProps<{
  visible: boolean
}>(), {
  visible: false,
  action: ""
})
const action = ref(ApiTree.file.getUploadUri());
const percentage = ref(0);
const loading = ref(false);
const disabled = ref(true)
const fileList = ref<UploadUserFile[]>([]);
const fileId = ref<string[]>([]);
const beforeUpload = (rawFile: UploadRawFile) => {
  // 检测文件
  fileList.value.push({
    name: rawFile.name,
  })
  percentage.value = 0;
  disabled.value = true;
  return true;
}
const onUploadSuccess = (response: RestResult<string[]>) => {
  if (response.code !== 200) {
    ElMessage.error(response.msg)
    disabled.value = true;
  } else {
    ElMessage.success(response.msg);
    fileId.value = response.data;
    disabled.value = false;
  }
  percentage.value = 100;
}
const onImport = () => {
  loading.value = true;
  emits("import", fileId.value, () => {
    loading.value = false;
  });
}
watch(() => props.visible, () => {
  if (props.visible) {
    percentage.value = 0;
    loading.value = false;
    disabled.value = true;
    fileList.value = [];
    fileId.value = [];
  }
})
</script>
<style lang="scss" scope>
.zw-importer {
  display: flex;
  flex-direction: column;

  .uploader {
    flex-shrink: 0;

    .upload {
      width: 100%;
      // height: 240px;
    }
  }

  .files {
    flex: 1;
    display: flex;

    .file-name {
      font-size: 16px;
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      // background-color: #f0f0f0;
      color: v.$text-color;

      .name {
        padding: 0px 12px 0px 4px;
      }
    }
  }

  .import-progress {
    height: 32px;
  }

  .tip {
    height: 32px;
    line-height: 32px;
    color: rgb(246, 56, 56);
  }
}
</style>
